import { c as create_ssr_component, f as add_attribute } from "../../../chunks/index2.js";
import "mermaid";
import "html2canvas";
const _page_svelte_svelte_type_style_lang = "";
const css = {
  code: "pre.svelte-f75qbk{width:100%;height:150px;overflow-y:auto;padding:10px;background:#f9f9f9;border:1px solid #ddd}span.svelte-f75qbk{display:block;margin-top:20px;border:1px solid #ddd;padding:20px;background-color:#f1f1f1;min-height:300px}button.svelte-f75qbk{background-color:#007bff;color:white;padding:10px 20px;border:none;border-radius:5px;cursor:pointer}button.svelte-f75qbk:hover{background-color:#0056b3}",
  map: null
};
const Page = create_ssr_component(($$result, $$props, $$bindings, slots) => {
  let diagram = `
erDiagram
  CUSTOMER }|..|{ DELIVERY-ADDRESS : has
  CUSTOMER ||--o{ ORDER : places
  CUSTOMER ||--o{ INVOICE : "liable for"
  DELIVERY-ADDRESS ||--o{ ORDER : receives
  INVOICE ||--|{ ORDER : covers
  ORDER ||--|{ ORDER-ITEM : includes
  PRODUCT-CATEGORY ||--|{ PRODUCT : contains
  PRODUCT ||--o{ ORDER-ITEM : "ordered in"`;
  let container;
  $$result.css.add(css);
  return `<main><h1>Mermaid Diagram Viewer</h1>
  <pre contenteditable="true" class="svelte-f75qbk">${(($$value) => $$value === void 0 ? `` : $$value)(diagram)}</pre>
  <span class="svelte-f75qbk"${add_attribute("this", container, 0)}></span>
  
  
  <button class="svelte-f75qbk">Save as Image</button></main>`;
});
export {
  Page as default
};
